<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 面向过程编程  =>  就是分析出解决问题所需要的步骤，然后用变量,函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。

    // 经典案例
    // (1) 购物车  (1. 获取元素 2. 加号事件 3.减号事件 4.全选/反选 5.单删和全删 6.合计)
    // (2) 元素拖拽(1. 获取元素 2. 当鼠标按下，确定按下的位置 3.鼠标在文档移动时,盒子跟随移动 4.鼠标抬起，停止移动)


    // 面向对象编程  =>  思想上提升, 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)

    //  也就是说 把构成问题的事务（事务：一般是指要做的或所做的事情。在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元(unit) ），分解成各个对象，建立对象的目的是为了描述某个事物在整个解决问题的步骤中的行为  =>   (大量的分工,紧密的协作)


    // 面向对象的三大特征: 封装 继承 多态

    // 把大象放到冰箱里需要几步?

    // 面向过程编程: 
    // 1. 有 大象  冰箱
    // 2. 打开冰箱 open()
    // 3. 把大象放到冰箱里  put()
    // 4. 关上冰箱  close()


    // 面向对象编程: 
    var iceBox = {
        brand: "美的",
        weight: "50kg",
        volume: "120L",
        makeCold() {

        },
        open() {
            console.log("开灯");
        },
        put() {
            // 保鲜层
            // 冷冻层
        },
        close() {
            console.log("关灯");
        }

    }

    var elephant = {
        name: "小象",
        age: 2,
        weight: "2000kg",
        eat(arg) {
            console.log("吃", arg);
        }
    }

    iceBox.open();
    iceBox.put(elephant);
    iceBox.close();

    // 简单的来说:
    // 最简单的面向对象(字面量对象): 将面向过程中的变量和方法整合到对象中,作为对象的属性和方法










</script>

</html>